<template>
  <div class="finance-page">
    <el-card shadow="never">
      <template #header>
        <div class="flex items-center justify-between">
          <div class="text-base font-medium">佣金概览</div>
          <el-button
            :icon="useRenderIcon('ep:refresh')"
            :loading="loading"
            @click="loadData"
          >
            刷新
          </el-button>
        </div>
      </template>

      <el-row :gutter="16">
        <el-col :xs="24" :sm="12" :lg="6">
          <el-card class="metric" shadow="hover">
            <div class="metric-label">累计佣金</div>
            <div class="metric-value">
              {{ formatCurrency(totalCommission) }}
            </div>
            <div class="metric-desc">所有结算单佣金金额汇总</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <el-card class="metric" shadow="hover">
            <div class="metric-label">待开票佣金</div>
            <div class="metric-value text-warning">
              {{ formatCurrency(waitInvoiceCommission) }}
            </div>
            <div class="metric-desc">结算状态为“待开票”的佣金汇总</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <el-card class="metric" shadow="hover">
            <div class="metric-label">待打款佣金</div>
            <div class="metric-value text-warning">
              {{ formatCurrency(waitPayoutCommission) }}
            </div>
            <div class="metric-desc">结算状态为“待打款”的佣金汇总</div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="12" :lg="6">
          <el-card class="metric" shadow="hover">
            <div class="metric-label">已回收佣金</div>
            <div class="metric-value text-success">
              {{ formatCurrency(paidCommission) }}
            </div>
            <div class="metric-desc">结算状态为“已支付”的佣金汇总</div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="never" class="mt-4">
      <template #header>
        <div class="flex items-center justify-between">
          <div class="text-base font-medium">结算单佣金明细</div>
          <el-button type="primary" link @click="toSettlement">
            前往结算管理
          </el-button>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="statements"
        border
        empty-text="暂无结算单数据"
      >
        <el-table-column prop="statement_no" label="结算单号" min-width="160" />
        <el-table-column
          prop="seller_org_name"
          label="卖家组织"
          min-width="180"
        />
        <el-table-column label="佣金金额" min-width="140">
          <template #default="{ row }">
            {{ formatCurrency(row.commission_amount) }}
          </template>
        </el-table-column>
        <el-table-column label="订单金额" min-width="140">
          <template #default="{ row }">
            {{ formatCurrency(row.total_order_amount) }}
          </template>
        </el-table-column>
        <el-table-column label="结算金额" min-width="140">
          <template #default="{ row }">
            {{ formatCurrency(row.payable_amount) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" min-width="120">
          <template #default="{ row }">
            <el-tag size="small" effect="plain">
              {{ row.status_label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="生成时间" prop="generated_at" min-width="160" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { message } from "@/utils/message";
import {
  fetchStatementList,
  type StatementListItem
} from "@/api/system/settlement/statement";

const router = useRouter();
const loading = ref(false);
const statements = ref<StatementListItem[]>([]);

const loadData = async () => {
  loading.value = true;
  try {
    const { list } = await fetchStatementList({ page: 1, page_size: 100 });
    statements.value = list;
  } catch (error: any) {
    message(error?.message ?? "加载佣金数据失败", { type: "error" });
  } finally {
    loading.value = false;
  }
};

const sumBy = (getter: (row: StatementListItem) => number) =>
  statements.value.reduce((total, item) => total + getter(item), 0);

const formatCurrency = (value: number) =>
  new Intl.NumberFormat("zh-CN", {
    style: "currency",
    currency: "CNY"
  }).format(value ?? 0);

const totalCommission = computed(() =>
  sumBy(item => Number(item.commission_amount ?? 0))
);
const waitInvoiceCommission = computed(() =>
  sumBy(item => (item.status === 2 ? Number(item.commission_amount ?? 0) : 0))
);
const waitPayoutCommission = computed(() =>
  sumBy(item => (item.status === 3 ? Number(item.commission_amount ?? 0) : 0))
);
const paidCommission = computed(() =>
  sumBy(item => (item.status === 4 ? Number(item.commission_amount ?? 0) : 0))
);

const toSettlement = () => {
  router.push("/system/finance/settlement");
};

onMounted(() => {
  loadData();
});
</script>

<style scoped>
.finance-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
}

.metric {
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.metric-label {
  font-size: 0.875rem;
  color: var(--el-text-color-secondary);
}

.metric-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.metric-desc {
  font-size: 0.75rem;
  color: var(--el-text-color-secondary);
}

.metric-value.text-warning {
  color: var(--el-color-warning);
}

.metric-value.text-success {
  color: var(--el-color-success);
}

.mt-4 {
  margin-top: 16px;
}
</style>
